<template>
    <div id="app">
      <ul>
        <li v-for="(message, index) in messages" :key="index">
          {{ message.role === 'USER' ? '我说：' : 'AI说：' }} {{ message.content }}
        </li>
      </ul>
      <div>
        <input v-model="text" type="text" placeholder="请输入内容" />
        <button @click="send">发送</button>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  
  export default {
    data() {
      return {
        messages: [{ role: 'SYSTEM', content: '你好，我是AI助手' }],
        text: ''
      };
    },
    methods: {
      send() {
        const userInput = this.text;
        this.messages.push({ role: 'USER', content: userInput });
  
        axios.post('http://localhost:8080/api/generate', {
          userPrompt: userInput,
          maxTokens: 100
        })
        .then(response => {
          if (response.data && response.data.output && response.data.output.text) {
            this.messages.push({ role: 'AI', content: response.data.output.text });
          } else {
            this.messages.push({ role: 'AI', content: '未能生成有效的响应' });
          }
          this.text = ''; // 清空输入框内容
        })
        .catch(error => {
          this.messages.push({ role: 'AI', content: '发生错误 - ' + error.message });
        });
      }
    }
  };
  </script>
  
  <style scoped>
  #app {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  li {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  input[type="text"] {
    padding: 10px;
    width: calc(100% - 80px);
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
    margin-right: -4px;
  }
  
  button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #45a049;
  }
  
  </style>
  